<template>
   <div class="detail-view has-header">
       <banner title="每天看点好内容"></banner>
       <template v-if="!showLoading">
           <div class="info">
               <h2>{{eventItem.title}}<span class="badge">{{eventItem.loc_name}}</span></h2>
               <div class="poster"><img :src="eventItem.image_hlarge" alt=""></div>
               <div class="detail"><span>时间:&nbsp;&nbsp;</span>
                    <ul>
                        <li>{{eventItem.begin_time}}</li>
                        <li>{{eventItem.end_time}}</li>
                    </ul>
               </div>
               <div class="detail">
                   <span>地点：&nbsp;&nbsp;</span>
                   <ul><li>{{eventItem.address}}</li></ul>
               </div>
               <div class="detail">
                   <span>费用:&nbsp;&nbsp;</span>
                   <ul><li>{{eventItem.fee_str}}</li></ul>
               </div>
               <div class="detail">
                   <span>类型&nbsp;&nbsp;</span>
                   <ul><li>{{eventItem.category_name}}</li></ul>
               </div>
               <div class="detail">
                   <span>起始时间：&nbsp;&nbsp;</span>
                   <ul><li v-if="eventItem.owner">{{eventItem.owner.name}}</li></ul>
               </div>
               <tags v-if="eventItem.tags" :items="eventItem.tags | toArray"></tags>
               <div class="describe">
                   <h2>活动详情</h2>
                   <div v-if="eventItem.content" class="content" v-html="content"></div>
               </div>
           </div>
           <download-app></download-app>
       </template>
       <loading v-show="showLoading"></loading>
   </div>
</template>

<script>
import Banner from '../component/Banner.vue';
import Tags from '../component/Tags.vue';
import DownloadApp from '../component/DownloadApp.vue';
import Loading from '../component/DownloadApp.vue';
import { mapState } from 'vuex'

   export default {
       name: 'detail-view',
       components: { Banner, Tags, DownloadApp, Loading },
       data () {
       return {
           showLoading: true
       }
   },
   filters: {
       toArray(value){
           return value.split(',')
       }
   },
   computed: {
       content: function(){
           return this.eventItem.content.replace(/<img.+?>/ig, '')
       },
       ...mapState({
           eventItem: state => state.activities.eventItem
       })
   },
   created(){
       const id = this.$route.params.id;
       this.$store.dispatch({
           type: 'getSingleEvent',
           id: id
       }).then(res => {
           // 加载完毕
           this.showLoading = false
       })
   }
 }
</script>

<style lang="scss" scoped>
.info {
  margin: 1rem;
  h2 {
    margin: 2rem 0;
    font-weight: bold;
    color: #494949;
  }
  .badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    margin-bottom: 0.3rem;
    vertical-align: middle;
    line-height: 1.8rem;
    font-size: 1.2rem;
    color: #fff;
    background-color: #FF8263;
    border-radius: 0.2rem;
  }
  .poster {
    margin: 2rem auto;
    text-align: center;

    img {
      width: 100%;
      max-width: 22rem;
      height: auto;
    }
  }
}
.detail {
  margin-left: 3.3rem;
  margin-bottom: 1rem;
  min-height: 1.5em;
  font-size: 1.4rem;
  clear: left;
  span {
    float: left;
    margin-left: -3.3rem;
    line-height: 150%;
    color: #666666;
  }
  ul {
    list-style-position: outside;
    margin-left: 0;
  }
}
.describe {
  h2 {
    color: #072;
  }
  .content {
    overflow: hidden;
    font-size: 1.4rem;
  }
}
</style>
